<template>
    <div class="timer-wrapper">
        <span>{{ hh }}</span>
        <span>:</span>
        <span>{{ mm }}</span>
        <span>:</span>
        <span>{{ ss }}</span>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useStore } from '@/stores';
const store = useStore();
const props = defineProps({
    mode: {
        type: String
    },
    total: {
        type: Number
    },
    step: {
        type: Number
    }
});
watch(() => props.step, (newData) => {
    let h = parseInt(newData / 3600);
    let m = parseInt((newData - h * 3600) / 60);
    let s = newData - h * 3600 - m * 60;
    hh.value = h < 10 ? ("0" + h) : h;
    mm.value = m < 10 ? ("0" + m) : m;
    ss.value = s < 10 ? ("0" + s) : s;
})

const hh = ref("00");
const mm = ref("00");
const ss = ref("00");

</script>
<style scoped>
.timer-wrapper {
    background-color: rgb(0, 68, 64);
    color: #fff;
    display: flex;
    gap: 5px;
    padding: 0 10px;
    border-radius: 5px;
    align-items: center;
}
</style>